<template>
  <view>
    <text class="child-title">子组件A</text>
    <view class="content">
      <text>父组件传值：</text>
      <text class="red-text">{{ parentValue || '无' }}</text>
    </view>
    <button @click="sendToB">传值给子组件B</button>
  </view>
</template>

<script>
export default {
  props: {
    parentValue: {
      type: String,
      default: ''
    }
  },
  methods: {
    sendToB() {
      // 将父组件传来的值转发给父组件（再由父组件传给子组件B）
      this.$emit('sendToParent', this.parentValue)
    }
  }
}
</script>

<style scoped>
.child-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  color: #333;
}

.content {
  font-size: 24rpx;
  margin: 15rpx 0;
}

.red-text {
  color: red;
  font-weight: bold;
}

button {
  margin-top: 10rpx;
  background: #ff9900;
  color: white;
  border-radius: 4rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
}
</style>